<template>
  <div class="ali-player">
    <div class="main">
      <div class="video-center">
        <div v-if="!config.video" class="tips">请选择视频源</div>
        <div :id="'video' + info" ref="audioref" :class="className" style="background-color: #0c0b0b"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref, onUnmounted } from 'vue'
export default {
  name: 'custom_audio',
  props: {
    className: {
      type: String,
      default: 'custom_audio'
    },
    config: {
      type: Object,
      default: {}
    },
    isIo: {
      type: String,
      default: true
    },
    info: {
      type: Number
    }
  },
  setup(props) {
    const videoObject = reactive({
      container: '#video',
      variable: 'player',
      volume: 0,
      autoplay: true,
      plug: 'hls.js',
      html5m3u8: true,
      live: true,
      waiting: false
    })
    let $io = ref()
    const audioref = ref()
    const initPlayer = (id) => {
      audioref.value = new ckplayer(Object.assign(videoObject, { ...props.config, container: `#${id}` }))
    }

    onMounted(() => {
      if (props.isIo) {
        $io.value = new IntersectionObserver(
          (entries) => {
            if (entries[0]?.isIntersecting) {
              console.log('已经进入',entries)
              initPlayer(entries[0].target.id)
            } else {
              console.log('离开')
              if (audioref.value?.pause) {
                audioref.value.remove()
              }
            }
          },
          {
            thresholds: [50]
          }
        )
        $io.value.observe(audioref.value)
      }
    })
    onUnmounted(() => {
      $io.value.disconnect()
    })
    return {
      initPlayer,
      audioref,
      ...toRefs(videoObject)
    }
  }
}
</script>
<style lang="scss" scoped>
.ali-player {
  width: 100%;
  .main {
    box-sizing: border-box;
    color: #ffffff;
    .video-center {
      position: relative;
      .name {
        position: absolute;
        left: 50%;
        top: -20px;
        font-size: 18px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }
      .tips {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 9999;
        opacity: 0.79;
      }
    }
  }
  .custom_audio {
    width: 100%;
    height: 200px;
    opacity: 0.79;
  }
}
</style>
